import Designer from './lib';

// import Logic from './lib/class/logic/index.js';
// // 注册节点
// Designer.register(Logic);

// 创建画布
const stage = new Designer.Stage({
  container: '#container', // container 元素选择器或 dom 元素
  fps: 144, // 每秒帧数（绘制函数每秒调用最大次数），默认 144
  autoSize: true, // 根据 container 元素自动设置画布宽高
  scaleRatio: 1.1, // 缩放比率
  minScale: 0.3, // 最小缩放比例
  maxScale: 3, // 最大缩放比例
  padding: null, // 内边距（控制视口）[上, 右, 下, 左]
  scrollbar: true, // 画布是否有滚动条
  eventEnabled: true, // 画布是否启用事件
  draggable: true, // 画布是否可拖动
  scaleable: true, // 画布是否可缩放
  selectable: true, // 是否可选择节点
  regionable: true, // 是否可框选节点
  transformable: true, // 是否可转换节点
  stackable: true, // 是否可堆叠节点，仅对拖动节点有效，有编组节点时慎用！
  recordable: true, // 是否开启内置历史状态记录（撤销，回退）
  guidesable: true, // 是否开启内置辅助线功能
  edgeable: true, // 是否开启节点连线功能
  grid: true, // 绘制网格
  devMode: false, // 开发者模式
});
window.stage = stage;

// 显示帧数
setInterval(() => (document.querySelector('#fps').innerHTML = `${stage.frame.frameRate.toFixed(0)}`), 1000);
stage.on('draw', function () {
  // console.log('draw');
  // document.querySelector('#offset').innerHTML = `X: ${stage.offset.x}, Y: ${stage.offset.y}`;
  document.querySelector('#scale').innerHTML = `${stage.scale}`;
  document.querySelector('#nodesNum').innerHTML = `${stage.allNodes.length}`;
});
// 监听画布行为（不包括画布拖动、缩放、移动、节点拖动）
stage.on('action', function () {
  // console.log('action');
});
// 监听所有画布行为
stage.on('allAction', function () {
  // console.log('allAction');
});
// 画布右键事件（打开上下文菜单事件）
stage.on('contextmenu', function ({ e, target, currentTarget }) {
  e.preventDefault(); // 阻止事件默认行为
  // e: 原始 Event 对象
  // target: 目标节点
  // currentTarget: 触发事件的节点
  console.log('target', target);
});
// 节点选择事件
stage.on('select', function (nodes) {
  // console.log('nodes: ', nodes);
  const str = `${nodes.map((i) => `${i.name}(🔄: ${i.rotation}, 🔍︎: ${i.scale})`).join(', ')}`;
  document.querySelector('#nodes').innerHTML = !nodes.length ? '无' : str;
});
// 节点连线选择事件
stage.on('edgeSelect', function (edges) {
  console.log('edgeSelect: ', edges);
});
// 添加节点连线事件
stage.on('edgeAdd', function (edge) {
  console.log('edgeAdd: ', edge);
});
// 移除节点连线事件
stage.on('edgeRemove', function (removedEdges) {
  console.log('edgeRemove: ', removedEdges);
});

// 快捷键行为预检
stage.hotkeyPrecheck = function (action) {
  // console.log(action, this);
};

// 节点连线预检
stage.edgePrecheck = (mode, edge) => {
  const { source, sourceNode, sourceAnchor, target, targetNode, targetAnchor } = edge;
  // 开始连线
  if (mode === 'start') {
    // return false;
  }
  // 添加连线
  if (mode === 'add') {
    // return false;
  }
  // 移除连线
  if (mode === 'remove') {
    // return false;
  }
};

const logic1 = new Designer.Logic({
  customData: {}, // 节点自定义数据
  x: 0,
  y: 0,
  width: 200,
  height: 300,
  name: '级联选择器(输入框)',
  draggable: true,
  nameShow: true, // 是否展示逻辑块 name
  // 逻辑块 name 样式配置
  nameStyle: {
    background: '#08C3B4', // 容器填充颜色
    color: 'white', // 文字颜色
    disableBackground: '#99E9E3', // 锁定状态容器填充颜色
    disableColor: 'white', // 锁定状态文字颜色
  },
  // strokeStyle: 'green', // 描边颜色
  // strokeWidth: 2, // 描边线宽
  // strokeDash: [4, 4], // 描述虚线模式的线和间隙的交替长度
  // strokeRadius: 6, // 描边圆角半径
  // fill: true, // 是否填充
  // fillStyle: 'blue', // 填充颜色
  // innerStrokeStyle: 'red', // 内边框描边颜色
  emptyText: '请先在右侧属性设置中编辑逻辑块',
  anchors: [
    { side: 'left', offset: 20, id: 0, name: '输入1' },
    { side: 'left', offset: 50, id: 1, name: '输入2' },
    { side: 'left', offset: 80, id: 2, name: '输入3' },
    { side: 'right', offset: 20, id: 3, name: '输出1' },
    { side: 'right', offset: 60, id: 4, name: '输出2' },
    { side: 'right', offset: 160, id: 'shuchu3', name: '输出3', logicType: 'port' },
    { side: 'right', offset: 200, id: 'event', name: '事件触发', logicType: 'event' },
    { side: 'right', offset: 220, id: 'listener', name: '事件监听', logicType: 'listener' },
  ],
  parent: stage,
});

const logic2 = new Designer.Logic({
  x: 450,
  y: 200,
  width: 500,
  height: 300,
  name: '逻辑块2',
  draggable: true,
  nameStyle: {
    background: '#9867FF', // 容器填充颜色
    color: 'white', // 文字颜色
    disableBackground: '#CBB3FF', // 锁定状态容器填充颜色
    disableColor: 'white', // 锁定状态文字颜色
  },
  // strokeWidth: 2,
  // strokeStyle: 'green',
  emptyText: '请先在右侧属性设置中编辑逻辑块',
  icon: 'https://front-xps-cdn.xsyx.xyz/custom/day360/2023/09/28/377822618.png', // 图标
  anchors: [
    { side: 'left', offset: 20, id: 0, name: '输入1' },
    { side: 'left', offset: 50, id: 1, name: '输入2' },
    { side: 'left', offset: 80, id: 2, name: '输入3' },
    { side: 'right', offset: 20, id: 3, name: '输出1' },
    { side: 'right', offset: 60, id: 4, name: '输出2' },
    { side: 'right', offset: 160, id: 5, name: '输出3' },
  ],
  parent: stage,
});

logic2.on('nodeDrag', function () {
  const { rectDrawInfo } = this.getNameDrawInfo();
  const { x, y, width } = rectDrawInfo;
  const { grid, offset, absolute, fixed } = this.getGlobalCoord({ x: x + width + 4, y });
  // grid: 画布网格坐标，在 canvas 坐标系中的坐标
  // offset: 画布相对坐标，相对于 canvas 节点中的坐标
  // absolute: 画布绝对坐标，以父级 designer-container 元素为基准的绝对坐标
  // fixed: 相对于浏览器窗口的坐标
});

const logic3 = new Designer.Logic({
  x: 150,
  y: 400,
  width: 200,
  height: 300,
  name: '逻辑块3',
  draggable: false,
  nameStyle: {
    background: '#DBFFFC', // 容器填充颜色
    border: '#00C8B8', // 容器描边颜色（不设置默认使用填充颜色）
    color: '#00C8B8', // 文字颜色
    disableBackground: '#E5F6F4', // 锁定状态容器填充颜色
    disableBorder: '#7FD8D1', // 锁定状态容器描边颜色（不设置默认使用填充颜色）
    disableColor: '#7FD8D1', // 锁定状态文字颜色
  },
  icon: 'https://front-xps-cdn.xsyx.xyz/custom/day360/2023/09/28/377822618.png', // 图标
  anchors: [
    { side: 'left', offset: 20, id: 0, name: '输入1' },
    { side: 'left', offset: 50, id: 1, name: '输入2' },
    { side: 'left', offset: 80, id: 2, name: '输入3' },
    { side: 'right', offset: 20, id: 3, name: '输出1' },
    { side: 'right', offset: 60, id: 4, name: '输出2' },
    { side: 'right', offset: 160, id: 5, name: '输出3' },
  ],
  parent: stage,
});
const logic4 = new Designer.Logic({
  x: 450,
  y: 600,
  width: 150,
  height: 300,
  name: '逻辑块3',
  draggable: true,
  nameStyle: {
    background: '#DBFFFC', // 容器填充颜色
    border: '#00C8B8', // 容器描边颜色（不设置默认使用填充颜色）
    color: '#00C8B8', // 文字颜色
    disableBackground: '#E5F6F4', // 锁定状态容器填充颜色
    disableBorder: '#7FD8D1', // 锁定状态容器描边颜色（不设置默认使用填充颜色）
    disableColor: '#7FD8D1', // 锁定状态文字颜色
  },
  icon: 'https://front-xps-cdn.xsyx.xyz/custom/day360/2023/09/28/377822618.png', // 图标
  emptyText: '请先在右侧属性设置中编辑逻辑块',
  anchors: [
    { side: 'left', offset: 20, id: 0, name: '输入1' },
    { side: 'left', offset: 50, id: 1, name: '输入2' },
    { side: 'left', offset: 80, id: 2, name: '输入3' },
    { side: 'right', offset: 20, id: 3, name: '输出1' },
    { side: 'right', offset: 60, id: 4, name: '输出2' },
    { side: 'right', offset: 160, id: 5, name: '输出3' },
  ],
  parent: stage,
});
const logic5 = new Designer.Logic({
  x: 850,
  y: 600,
  width: 200,
  height: 300,
  name: '逻辑块3',
  draggable: true,
  nameStyle: {
    background: '#DBFFFC', // 容器填充颜色
    border: '#00C8B8', // 容器描边颜色（不设置默认使用填充颜色）
    color: '#00C8B8', // 文字颜色
    disableBackground: '#E5F6F4', // 锁定状态容器填充颜色
    disableBorder: '#7FD8D1', // 锁定状态容器描边颜色（不设置默认使用填充颜色）
    disableColor: '#7FD8D1', // 锁定状态文字颜色
  },
  icon: 'https://front-xps-cdn.xsyx.xyz/custom/day360/2023/09/28/377822618.png', // 图标
  anchors: [
    { side: 'left', offset: 20, id: 0, name: '输入1' },
    { side: 'left', offset: 50, id: 1, name: '输入2' },
    { side: 'left', offset: 80, id: 2, name: '输入3' },
    { side: 'right', offset: 20, id: 3, name: '输出1' },
    { side: 'right', offset: 60, id: 4, name: '输出2' },
    { side: 'right', offset: 160, id: 5, name: '输出3' },
  ],
  parent: stage,
});

new Designer.Image({
  x: 500,
  y: -100,
  width: 200,
  height: 200,
  src: 'https://blog.swzj.fun/logo.png',
  rotation: 30,
  draggable: true,
  // anchors: true,
  parent: stage,
});
new Designer.Text({
  x: 300,
  y: 0,
  width: 120,
  text: '这是一段测试文本这是一段测试文本,这是一段测试文本,这是\n一段测试文本',
  wrap: true,
  draggable: true,
  // anchors: true,
  parent: stage,
});
// 添加节点连线
stage.addEdge({
  source: logic1.id,
  sourceAnchor: 'shuchu3',
  target: logic2.id,
  targetAnchor: 2,
  effect: 'ant-dashed-arrows',
});
setTimeout(() => {
  stage.addEdge({
    source: logic1.id,
    sourceAnchor: 3,
    target: logic3.id,
    targetAnchor: 1,
    effect: 'dashed-blink',
  });
  stage.addEdge({
    source: logic3.id,
    sourceAnchor: 3,
    target: logic1.id,
    targetAnchor: 1,
    effect: 'dashed-blink',
  });
  stage.addEdge({
    source: logic4.id,
    sourceAnchor: 3,
    target: logic5.id,
    targetAnchor: 1,
    effect: 'dashed-blink',
  });
}, 1000);
// setTimeout(() => {
//   // 移除节点连线
//   stage.removeEdge({
//     // id: 'id', // id 方式
//     source: logic1.id,
//     sourceAnchor: 3,
//     // target: logic2.id,
//     // targetAnchor: 1,
//   });
// }, 2000);
stage.clearHistory();
stage.adaptive();
console.log('stage: ', stage);

// 获取所有子节点的锚点
console.log(stage.allAnchors);
// 获取所有可见子节点的锚点
console.log(stage.allVisibleNodesAnchors);
// 获取所有节点连线
console.log(stage.edges);
// 寻找节点连线 返回数组
console.log(
  stage.findEdge({
    source: logic1.id,
    // sourceAnchor: 3,
    // target: logic2.id,
    // targetAnchor: 1,
  }),
);

// 主动触发快捷键行为 'undo'|'redo'|'delete'|'selectAll'|'increaseScale'|'decreaseScale'
// setTimeout(() => {
//   stage.actionHotkey('delete');
// }, 1000);

// setTimeout(() => {
//   console.log(stage.toSchema());
// }, 3000);
